<template>
	<view class="authbook">
		<view class="flex p-30" style="width: 100%;background-color: #F7FCE6;">
			<view class="" style="padding: 10rpx 20rpx 0 0;">
				<image src="@/static/users/red.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			<view class="small-size-28" style="color: #8A9668;">
				请上传本人真实的技能证书信息。技能证书审核通过后，可
				提升商家信任度，从而提升派单率。
			</view>
		</view>
		<view class="w94 bgwhite radius20 p-30 mt20">
			<view class="flex-between" style="height: 80rpx;line-height: 80rpx;" v-for="i in list" :key="i.id"
				@click="clickHander(i)">
				<view class="">
					{{i.name}}
				</view>
				<u-icon name="arrow-right" :label="i.renzheng?'已上传':'未上传'" size="28" label-pos="left"></u-icon>
			</view>
		</view>
		<u-popup :show="show" @close="close" border-radius="10" mode="bottom" :customStyle="{'width':'100%'}"
			@open="opens">
			<view class="">
				<view style="text-align: center;font-size: 30rpx;padding: 15rpx;" v-if="isHide"> 上传证书</view>
				<view style="text-align: center;font-size: 30rpx;padding: 15rpx;" v-else> 查看证书</view>
				<view class="w94" style="margin:40rpx auto ">
					<view class="flex-center mt20">
						<view class="radius20 flex-center"
							style="background-color: #F7FCE6; height: 240rpx; width: 70%;" v-if="!src" @click="upload">
							<view class="flex-center"
								style="width: 100rpx;height: 100rpx;background: #DAF397;border-radius: 50%;">
								<image src="@/static/order/carm.png" mode="" style="width: 60rpx;height: 60rpx;">
								</image>
							</view>
						</view>
						<image :src="src" mode="" style="width: 70%;height: 240rpx;" v-else @click="pre([src])">
						</image>
					</view>
				</view>
				<view class="" v-if="isHide"
					style="box-shadow: 1px -5px 10px #ccc;padding: 30rpx; background-color: #fff;display: flex;justify-content: space-around;width: 100%;">
					<view class=""
						style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;"
						@click="save">
						保存
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSkill,
		setSkill,
		uploadFile
	} from '@/common/teacherReq.js'
	export default {
		data() {
			return {
				list: [{
					"id": 1,
					"name": "电工证",
					"renzheng": 0,
					"photo": ""
				}, {
					"id": 2,
					"name": "焊工证",
					"renzheng": 0
				}],
				src: '',
				show: false,
				id: null,
				isHide: true
			};
		},
		methods: {
			clickHander(value) {
				this.show = true
				this.id = value.id
				if (value.renzheng) {
					this.src = value.photo
					this.isHide = false
				} else {
					this.isHide = true
				}
				// setSkill({
				// 	category_id: value.id,

				// })
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths);
						this.src = res.tempFilePaths[0]
					}
				})
			},
			async save() {
				try {
					let resp = await uploadFile({
						filePath: this.src,
					})
					console.log('resp: ', resp);
					this.src = JSON.parse(resp[1].data).data.fullurl
					let set = await setSkill({
						category_id: this.id,
						photo: this.src
					})
				} catch (error) {
					//TODO handle the exception
					uni.showToast({
						icon: 'error',
						title: '上传失败'
					})
				}
				this.show = false

			},
			close() {
				this.show = false
				this.src = ''
				this.id = ''
			},
			opens() {
				console.log('open----')
			},
			pre(arr) {
				uni.previewImage({
					urls: arr
				})
			}
		},
		onLoad() {
			getSkill({}).then(res => {
				console.log('res: ', res);
				this.list = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.authbook {
		height: calc(100vh - 15px);
		// background: linear-gradient(to bottom, #CEEE5B, 30%, #fff);

		// padding: 30rpx;
		position: relative;
	}
</style>